<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <!-- 解决图片出现403的问题 https://blog.csdn.net/tiantang_1986/article/details/83748782 -->
  <meta name="referrer" content="no-referrer" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>力扣刷题排行榜</title>
</head>

<body>
  <div id="app">

    <style>
      .ant-spin {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #475669;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: "tnum";
        position: absolute;
        display: none;
        color: #F40;
        text-align: center;
        vertical-align: middle;
        opacity: 0;
        transition: transform .3s cubic-bezier(.78, .14, .15, .86)
      }

      .ant-spin-spinning {
        position: static;
        display: inline-block;
        opacity: 1
      }

      .ant-spin-nested-loading {
        position: relative
      }

      .ant-spin-nested-loading>div>.ant-spin {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        display: block;
        width: 100%;
        height: 100%;
        max-height: 400px
      }

      .ant-spin-nested-loading>div>.ant-spin .ant-spin-dot {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -10px
      }

      .ant-spin-nested-loading>div>.ant-spin .ant-spin-text {
        position: absolute;
        top: 50%;
        width: 100%;
        padding-top: 5px;
        text-shadow: 0 1px 2px #fff
      }

      .ant-spin-nested-loading>div>.ant-spin.ant-spin-show-text .ant-spin-dot {
        margin-top: -20px
      }

      .ant-spin-nested-loading>div>.ant-spin-sm .ant-spin-dot {
        margin: -7px
      }

      .ant-spin-nested-loading>div>.ant-spin-sm .ant-spin-text {
        padding-top: 2px
      }

      .ant-spin-nested-loading>div>.ant-spin-sm.ant-spin-show-text .ant-spin-dot {
        margin-top: -17px
      }

      .ant-spin-nested-loading>div>.ant-spin-lg .ant-spin-dot {
        margin: -16px
      }

      .ant-spin-nested-loading>div>.ant-spin-lg .ant-spin-text {
        padding-top: 11px
      }

      .ant-spin-nested-loading>div>.ant-spin-lg.ant-spin-show-text .ant-spin-dot {
        margin-top: -26px
      }

      .ant-spin-container {
        position: relative;
        transition: opacity .3s
      }

      .ant-spin-container:after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: none\9;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: 0;
        transition: all .3s;
        content: "";
        pointer-events: none
      }

      .ant-spin-blur {
        clear: both;
        overflow: hidden;
        opacity: .5;
        user-select: none;
        pointer-events: none
      }

      .ant-spin-blur:after {
        opacity: .4;
        pointer-events: auto
      }

      .ant-spin-tip {
        color: #475669
      }

      .ant-spin-dot {
        position: relative;
        display: inline-block;
        font-size: 20px;
        width: 20px;
        height: 20px
      }

      .ant-spin-dot-item {
        position: absolute;
        display: block;
        width: 9px;
        height: 9px;
        background-color: #F40;
        border-radius: 100%;
        transform: scale(.75);
        transform-origin: 50% 50%;
        opacity: .3;
        animation: antSpinMove 1s linear infinite alternate
      }

      .ant-spin-dot-item:first-child {
        top: 0;
        left: 0
      }

      .ant-spin-dot-item:nth-child(2) {
        top: 0;
        right: 0;
        animation-delay: .4s
      }

      .ant-spin-dot-item:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: .8s
      }

      .ant-spin-dot-item:nth-child(4) {
        bottom: 0;
        left: 0;
        animation-delay: 1.2s
      }

      .ant-spin-dot-spin {
        transform: rotate(45deg);
        animation: antRotate 1.2s linear infinite
      }

      .ant-spin-sm .ant-spin-dot {
        font-size: 14px;
        width: 14px;
        height: 14px
      }

      .ant-spin-sm .ant-spin-dot i {
        width: 6px;
        height: 6px
      }

      .ant-spin-lg .ant-spin-dot {
        font-size: 32px;
        width: 32px;
        height: 32px
      }

      .ant-spin-lg .ant-spin-dot i {
        width: 14px;
        height: 14px
      }

      .ant-spin.ant-spin-show-text .ant-spin-text {
        display: block
      }

      @media (-ms-high-contrast:active),
      (-ms-high-contrast:none) {
        .ant-spin-blur {
          background: #fff;
          opacity: .5
        }
      }

      @keyframes antSpinMove {
        to {
          opacity: 1
        }
      }

      @keyframes antRotate {
        to {
          transform: rotate(405deg)
        }
      }
    </style>
    <div id="appLoading">
      <div class="ant-spin ant-spin-lg ant-spin-spinning" style="position:fixed;left:50%;top:40%;margin-left:-16px;">
        <span class="ant-spin-dot ant-spin-dot-spin"><i class="ant-spin-dot-item"></i><i
            class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i></span>
        <div style="margin-top: 8px;">你即将看到振奋人心的数据...</div>
      </div>
    </div>
  </div>
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
    src="//music.163.com/outchain/player?type=2&id=188175&auto=0&height=66"
    style="position: fixed;top: 0;left: 0;"></iframe>
  <!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
    src="//music.163.com/outchain/player?type=2&id=320950&auto=0&height=66"
    style="position: fixed;top: 80px;left: 0;"></iframe> -->
  <script type="module" src="/src/main.js"></script>
</body>

</html>